.layout{
  width: 100%;
  height: 100%;
  overflow: hidden;
  // position: fixed;
  // left: 0; 
  //   top: 0;
   // z-index: 1;
}

.header{
  color: white;
  font-weight: bold;
  font-size: 1.2em;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;

  .system{
    flex: 1;

    .logo{
      width: 32px;
      height: 32px;
    }
    .title{
      margin: 0 10px;
      letter-spacing: 2px;
    }
  }
  .avatar{
    width: 32px;
    height: 32px;
  }
  .user{
    //width: 60px;
  }

}
.footer{
  height: 30px;
  color: #888888;
  padding: 0px 20px;
  line-height: 30px;
}

.content{
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
  background-image: url(/assets/bk.jpg);
  background-size: cover;
  background-position: center;
}

.app{
  //display: flex;
  //flex-direction: column;
  //justify-content: center;
  //align-content: center;

  padding: 20px;
  text-align: center;
  border-radius: 20px;
  overflow: hidden;

  &:hover{
    background: #a0a0a077;
  }

  .icon{
    width: 60%;
    //display: block;
    background-color: white;
    padding: 15px;
    border-radius: 10px;
    //border-radius: 50%;
    //box-shadow: #606060 -1px -1px 5px inset;
  }
  .name{
    margin: 10px 0;
    text-align: center;
    //text-shadow: #a0a0a0 1px 1px 0;
    .inner{
      //padding: 5px 20px;
      border-radius: 10px;
      color: white;
      text-shadow: black 2px 2px 5px;
      //background: #606060;
      //color: white;
      letter-spacing: 1px;
      font-size: 1.1em;
      //box-shadow: #a0a0a0 2px 2px 5px inset;
    }
  }
}


.tab {
  position: fixed;
  left: 3px;
  bottom: 33px;
  display: flex;
  .tab-btn {
      margin-left: 5px;
      background-color: rgb(36, 144, 201);
      padding: 2px 5px 2px 10px;
      border-radius: 5px;
      display: flex;
      box-sizing: border-box;

  
  }
}
a {
  color: white;
}
 